<template>
	<uni-popup ref="dialog" :type="type" :mask-click="mask" :is-mask-click="mask" @maskClick="handleMask">
		<view class="pay-box">
			<view class="head-box">
				<slot name="head"></slot>
			</view>
			<view class="body">
				<view v-if="title" class="title">{{ title }}</view>
				<slot></slot>
			</view>
			<view class="code-Box" v-if="isSwAccount">
				<m-input class="code-item" v-model="account" placeholder="请输入用户名" gap="34 0">
					<m-icon spa="8 15" type="icon-qiehuan" v-if="isShowAccount"  @click="SwCode" slot="right"></m-icon>
				</m-input>
			</view>
			<view class="code-Box" v-if="isSendCode" style="padding-top: 10rpx;">
				<m-input class="code-item" v-model="code" placeholder="请输入验证码">
					<m-sendCode title="获取" v-model="userinfo.phone || userinfo.emaill" slot="right"></m-sendCode>
				</m-input>
			</view>
			<view class="pay-Box" >
				<template v-if="userinfo.payPassword == '1'">
					<m-input class="code-item" v-model="pwd" type="password" placeholder="请输入支付密码" />
					<view class="forget flex flex-end">
						<text @click="Jump('/pagesA/mine/userInfo/setPay/setPay')">忘记密码？</text>
					</view>
				</template>
				<template v-else>
					<view class="pay-error " @click="Jump('pagesA/mine/userInfo/setPay/setPay')">
						<text>未设置支付密码</text>
					</view>
				</template>
			</view>
			<view class="dialog-footer">
				<view class="cancel" type="falls" v-if="showCancel" @click="handleCancel">
					{{ cancelText }}
				</view>
				<view class="confirm flex-center" v-if="showConfirm" @click="handleConfirm">
					<template v-if="loading">
						<image class="loading" src="@/static/images/UI/btn-spin-grey.png"></image>
					</template>
					<template v-else>
						<text>{{ confirmText1 || confirmText }}</text>
					</template>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { encrypt } from '@/utils/aes.js'
	import props from './props.js';
	import { mapState } from 'vuex'
	import md5 from 'js-md5'
	export default {
		name: "m-pay",
		mixins: [props],
		watch: {
			loading(val) {
				this.isLoading = val;
			},
			value(val) {
				this.account = this.userinfo.phone || this.userinfo.emaill
				if (val) {
					this.open();
				} else {
					setTimeout(() => {
						this.pwd = '';
						this.code = '';
					}, 100)
					this.loading = false;
					this.close();
				}
			},
		},
		data() {
			return {
				code: '',
				pwd: '',
				isLoading: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
			confirmText1() {
				if (!Number(this.userinfo.payPassword)) {
					return "前往设置";
				} else {
					return this.confirmText;
				}
			},
			isShowAccount(){
				return   this.isSwAccount  && (this.userinfo.phone && this.userinfo.emaill )
			},
		},
		methods: {
			SwCode(){
				this.account = this.account==this.userinfo.phone?this.userinfo.emaill:this.userinfo.phone;
			},
			open() {
				this.$refs.dialog.open();
			},
			close() {
				this.$refs.dialog.close();
			},
			async handleConfirm() {
				
				// 未设置密码
				if (this.userinfo.payPassword == '0') {
					return this.Jump('/pagesA/mine/userInfo/setPay/setPay');
				}
				const params = {
					vcode:'',
					pwd:'',
				}
				if (this.isSendCode) {
					if (!this.code) {
						return this.Toast('请输入验证码');
					}
					params.vcode = this.code;
				}
				if (!this.pwd) {
					return this.Toast('请输入支付密码');
				} else {
					params.pwd = encrypt(this.pwd)
				}
				return this.$emit("handleConfirm", params);
			},
			handleCancel() {
				this.$emit("input", false);
				this.$emit("handleCancel");
			},
			handleMask() {
				if (!this.mask) return
				this.$emit("input", false);
				this.$emit("handleCancel");
			},
		},
	};
</script>

<style lang="scss">
	.pay-box {
		width: 620rpx;
		border-radius: 28rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 12;
		background: var(--block);
		color: var(--text);

		.title {
			padding: 20rpx 0;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			border-bottom: 1rpx solid var(--border);
		}
		.code-Box{
			padding: 40rpx 24rpx 0;
			/deep/ .m-input{
				background: var(--bg);
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				box-sizing: border-box;
				.line{
					display: none;
				}
			}
			.code-item{
				margin-top: 20rpx;
				padding: 10rpx 10rpx 10rpx 28rpx;
			}
		}
		.pay-Box {
			padding:20rpx 24rpx;

			.form-Item {
				background: var(--bg);
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				box-sizing: border-box;
				background: var(--bg);
				border: 1rpx solid #E7E7E7;
				border-radius: 20rpx;
				input {
					
					font-family: PingFang SC;
					font-weight: 400;
					font-size: var(--fs_26);
					color: rgba(51, 51, 51, .6);
				}
			}

			.forget {
				padding-top: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: var(--text_1);
			}

			.pay-error {
				padding: 20rpx 28rpx;
				text-align: center;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: var(--error);
				}

				.m-button {
					margin-left: 15rpx;
					padding: 5rpx 20rpx;
				}
			}
		}

		.dialog-footer {
			display: flex;
			border-top: 1rpx solid var(--border);
			overflow: hidden;
			border-radius: 0 0 28rpx 28rpx;

			&>view,
			.m-button {
				flex: 1;
				padding: 26rpx 0;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}

			.cancel {
				color: var(--text_1);
			}

			.confirm {
				position: relative;
				border-left: 1rpx solid var(--border);
				color: var(--text);

				image {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 40rpx;
					height: 40rpx;
					animation: rotate 1s infinite linear;
				}
			}

		}
	}
</style>